import React, { Component } from 'react'
import styles from './index.less'
import UserModal from './UserModal.js'
import { connect } from 'dva';
import { Table, Icon, Input, Button, Tag, Divider, Popconfirm } from 'antd';
import Authorized, {havePermission} from '@/utils/Authorized';

@connect(({ user, loading }) => ({ 
    userList: user.userList, userListPage: user.userListPage, userListTotal: user.userListTotal,
    fetchSelUserAllLoading: loading.effects['user/fetchSelUserAll'],
}))
export default class UserView extends Component {

    columns = [{
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
      },{
        title: '电话号',
        dataIndex: 'phone',
        key: 'phone',
      }, {
        title: '拥有角色',
        key: 'roleList',
        dataIndex: 'roleList',
        render: (roleList) => {
            let list = roleList.map((tag,index) =>{
                let tag1 = (<Tag color="blue" key={index}>{tag.name}</Tag>)
                let span1 = (<span key={index}>...</span>)
                //超过5个权限显示。。。
                if(index>4){
                    if(index===authList.length-1){
                        return span1
                    }
                }else{
                    return tag1
                }
            })
            return list
        }
      }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <Authorized authority={havePermission("AUTH_SMSUSER_EDIT")}>
                <a href="javascript:;" onClick={()=>{
                    this.showModal(record)
                    }} >编辑</a>
            </Authorized>
            <Divider type="vertical" />
            <Authorized authority={havePermission("AUTH_SMSUSER_DEL")}>
                <Popconfirm title="确定要删除这个用户?" onConfirm={this.confirm} okText="Yes" cancelText="No">
                    <a href="javascript:;" onClick = {()=>{
                            this.setState({
                                delUserId: record.id,
                            });
                        }}>删除</a>
                </Popconfirm>
            </Authorized>
          </span>
        ),
      }];

    constructor(props) {
        super(props);
        this.state = {
          userName: '',
          phone:'',
          delUserId: false,
        };
    }
    //删除确定
    confirm = (e) => {
        console.log(this.state.delUserId);
        if(this.state.delUserId){
            let id = this.state.delUserId
            this.state.delUserId = false
            const { dispatch } = this.props
            dispatch({
                type: 'user/fetchDelUser',
                payload: {
                    id: id,
                }
            })
        }
    }
    //编辑页面
    showModal = (e) => {
        const { dispatch } = this.props
        dispatch({
            type: 'user/setUpAddInfo',
            payload: {
                title: "修改用户", //标题
                visible: true, //可见
                action: "user/fetchUpdateUser", //要提交的action 新增或更新
                isUpdate: true, //是否更新了表单数据
                //表单数据
                id: e.id, 
                username: e.username,
                password: null,
                phone: e.phone,
                roleList: e.roleList
            }
        })
    }

    //用户名回调
    onChangeUserName = (e) => {
        this.setState({ userName: e.target.value });
    }
    onChangePhone = (e) => {
        this.setState({ phone: e.target.value });
    }

    setPage = (e) =>{
        const { dispatch } = this.props
        dispatch({
            type: 'user/fetchSelUserAll',
            payload: {
                page:e,
                userName:this.state.userName,
                phone:this.state.phone
            }
        })
    }

    render() {
        const { userName, phone } = this.state
        const { userList, userListPage, userListTotal, fetchSelUserAllLoading } = this.props
        console.log("user渲染",this.props)
        
        return (
            <div>
                <div className = {styles.query}>
                    <div className = {styles.search}>
                        <Input
                            className = {styles.input}
                            placeholder="用户名"
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            value={userName}
                            onChange={this.onChangeUserName}
                        />
                        <Input
                            className = {styles.input}
                            placeholder="电话号"
                            prefix={<Icon type="phone" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            value={phone}
                            onChange={this.onChangePhone}
                        />
                        <Button 
                            className = {styles.btn}
                            type="primary"
                            onClick = {()=>{
                                const { dispatch } = this.props
                                dispatch({
                                    type: 'user/fetchSelUserAll',
                                    payload: {
                                        userName:this.state.userName,
                                        phone:this.state.phone
                                    }
                                })
                            }}>查询</Button>
                    </div>
                    <Authorized authority={havePermission("AUTH_SMSUSER_ADD")}>
                        <Button type="primary" onClick={()=>{
                            const { dispatch } = this.props
                            dispatch({
                                type: 'user/setUpAddInfo',
                                payload: {
                                    title: "添加用户", //标题
                                    visible: true, //可见
                                    action: "user/fetchAddUser", //要提交的action 新增或更新
                                    isUpdate: true, //是否更新了表单数据
                                    //表单数据
                                    id: null, 
                                    username: null,
                                    password: null,
                                    phone: null,
                                    roleList:[]
                                }
                            })
                        }}>新增</Button>
                    </Authorized>
                </div>
                <Divider />
                <div className = {styles.content}>
                    <Table 
                        loading={fetchSelUserAllLoading}
                        columns={this.columns} 
                        dataSource={userList}
                        pagination = {{
                            current: userListPage,
                            total: userListTotal,
                            onChange: this.setPage
                        }} />
                </div>
                <UserModal/>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'user/fetchSelUserAll',
            payload: {page:this.props.userListPage}
        })
    }
}
